<template>
  <div class="member_wrap">
    <div class="top_wrap">
      <p>日期区间: {{ startTime || '-' }} - {{ endTime || '-' }}</p>
      <div class="t_detail_wrap">
        <div class="item_wrap">
          <div>会销人数</div>
          <div class="item_number">
            {{ memberAnalysisList.vipSellPeopleNumber || '-' }}
          </div>
        </div>
        <div class="item_wrap">
          <div>会销金额</div>
          <div class="item_number">
            {{ memberAnalysisList.vipSellMoney || '-' }}
          </div>
        </div>
        <div class="item_wrap">
          <div>会销占比</div>
          <div class="item_number">
            {{ memberAnalysisList.vipSellMoneyRatio || '-' }}%
          </div>
        </div>
        <div class="item_wrap">
          <div>新增会员</div>
          <div class="item_number">
            {{ memberAnalysisList.newVipNumber || '-' }}
          </div>
        </div>
      </div>
    </div>
    <div class="bottom_wrap">
      <el-table
        :data="memberAnalysisList.vipCustomerList"
        border
        style="width: 100%"
        :header-cell-style="{
          background: '#f4f4f4',
          padding: 0,
          height: '40px'
        }"
        :cell-style="{ padding: 0, height: '32px' }"
        max-height="500"
        height="69vh"
      >
        <el-table-column prop="cardNo" label="卡号"> </el-table-column>
        <el-table-column prop="name" label="顾客姓名"> </el-table-column>
        <el-table-column prop="sendMoney" label="售价"> </el-table-column>
        <el-table-column prop="birthdayYearMonth" label="生日">
        </el-table-column>
        <el-table-column prop="lastShoppingTime" label="最近购物日">
          <template slot-scope="scope">
            <span>{{ scope.row | formatTime('lastShoppingTime') }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="consumeMoney" label="累计购物金额">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { memberAnalysis } from '@/request/store/K_KPIAnalysis'
import { getCurrentMonthFirst, getCurrentMonthLast } from '@/util/util'
export default {
  data() {
    return {
      memberAnalysisList: {}
    }
  },
  created() {
    this.memberAnalysis()
    this.startTime = getCurrentMonthFirst(false)
    this.endTime = getCurrentMonthLast(false)
  },
  methods: {
    async memberAnalysis() {
      const { data } = await memberAnalysis()
      if (data && data.code === 200) {
        this.memberAnalysisList = data.data
        // console.log(this.memberAnalysisList)
      }
    }
  }
}
</script>

<style lang="less" scoped>
.member_wrap {
  margin-top: 16px;
  .top_wrap {
    .t_detail_wrap {
      display: flex;
      justify-content: space-around;
      text-align: center;
      align-items: center;
      width: 100%;
      height: 120px;
      border-radius: 10px;
      margin-top: 16px;
      background-color: #f7f7f7;
      .item_wrap {
        width: 200px;
        // background-color: chocolate;
        // flex: 1;
        .item_number {
          font-weight: 900;
          font-size: 20px;
        }
      }
    }
  }
  .bottom_wrap {
    margin-top: 16px;
  }
}
</style>
